﻿@page "/"
@layout LandingLayout
@inject DiscordApiClient DiscordApiClient;
@inject NugetApiClient NugetApiClient;
@inject GitHubApiClient GitHubApiClient;
@using MudBlazor.Docs.Components.LandingPage
@using MudBlazor.Docs.Extensions

<LandingSection SectionClass="top-section" BackgroundClass="sweet">
    <ChildContent>
        <MudGrid Class="mb-16 mb-sm-0">
            <MudItem Class="relative" xs="12" md="7" lg="6">
                <MudText Typo="Typo.h1">The Blazor</MudText>
                <MudText Typo="Typo.h1" HtmlTag="span" Class="landing-h1-gradient">Component </MudText>
                <MudText Typo="Typo.h1" HtmlTag="span">Library</MudText>
                <MudText Typo="Typo.h1">You always wanted</MudText>
                <div class="pl-1 my-4">
                    <MudText Typo="Typo.subtitle1" Class="mud-text-secondary">
                        With millions of downloads, from hobby developers to large enterprises, MudBlazor enables you to rapidly build amazing web applications without leaving your beloved C# language and toolchain.
                    </MudText>
                </div>
                <div class="d-flex py-4 mb-16 mb-md-0">
                    <MudButton Color="Color.Primary" Variant="Variant.Filled" DropShadow="false" Class="mud-button-gradient-primary" Size="Size.Large" Href="/getting-started/installation">Get started</MudButton>
                    <MudButton Color="Color.Default" Variant="Variant.Outlined" StartIcon="@Icons.Custom.Brands.GitHub" Size="Size.Large" Class="ms-4" Href="https://github.com/MudBlazor/MudBlazor/" Target="_blank">Star on GitHub</MudButton>
                </div>
                <div class="graphic-wrapper">
                    <Browser/>
                    <Phone/>
                </div>
            </MudItem>
        </MudGrid>
    </ChildContent>
    <Stripes>
        <div class="stripe gradient"></div>
        <div class="stripe background"></div>
    </Stripes>
</LandingSection>

<LandingSection Straight="true" Class="pt-0 pb-16">
    <MudText Typo="Typo.subtitle2" Align="Align.Center" Class="mb-16" Style="color: #8898aa;">
        The continued development and maintenance of MudBlazor is secured by our sponsors
    </MudText>
    <MudGrid Spacing="10" Justify="Justify.Center">
        <MudItem xs="6" md="4">
            <Sponsor LandingPage="true" Name="Adaris" Image="Adaris.png" Website="https://www.adaris.ch/"/>
        </MudItem>
        <MudItem xs="6" md="4">
            <Sponsor LandingPage="true" Name="Balesio" Image="Balesio.png" Website="https://blazor-agentur.ch/agency.html" />
        </MudItem>
        <MudItem xs="6" md="4">
            <Sponsor LandingPage="true" Name="Lithe Software Consulting" Image="Lithe.png"/>
        </MudItem>
        <MudItem xs="6" md="3">
            <Sponsor LandingPage="true" Name="Timewarp" Image="Timewarp.png" Website="https://timewarp.at/"/>
        </MudItem>
        <MudItem xs="6" md="3">
            <Sponsor LandingPage="true" Name="JetBrains" Image="JetBrains.png" Website="https://www.jetbrains.com/?from=MudBlazor"/>
        </MudItem>
        <MudItem xs="6" md="3">
            <Sponsor LandingPage="true" Name="Become Sponsor" Image="BecomeSponsor.png" Website="/mud/project/sponsor" Target="_self"/>
        </MudItem>
    </MudGrid>
</LandingSection>

<LandingSection Straight="true" BackgroundClass="sweet">
    <MudText Typo="Typo.h6" Color="Color.Primary">Unified platform</MudText>
    <MudText Typo="Typo.h5">MudBlazor is more than a library</MudText>
    <MudGrid>
        <MudItem xs="12" sm="6">
            <MudText Typo="Typo.subtitle1" Class="mud-text-secondary">
                We bring together everything that's required to build amazing Blazor applications that scale from desktop to mobile. Apart from the library itself we also provide <MudText Typo="Typo.subtitle1" HtmlTag="span" Color="Color.Primary">templates, a learning platform, theme manager, demo and example projects as well as an online code editor</MudText> integrated with our documentation and issue tracking. With more to come.
            </MudText>
        </MudItem>
        <MudItem xs="12" sm="6">
            <MudText Typo="Typo.subtitle1" Class="mud-text-secondary">
                We help companies build <MudText Typo="Typo.subtitle1" HtmlTag="span" Color="Color.Primary">amazing apps in record time</MudText> and let them focus on their business instead of buttons, <MudText Typo="Typo.subtitle1" HtmlTag="span" Color="Color.Primary">MudBlazor is battle-tested and one of the fastest-improving platforms</MudText>, and much more.
            </MudText>
        </MudItem>
    </MudGrid>

    <div class="@GetTestimonialClass()">
        <MudText Typo="Typo.h3" Align="Align.Center" Class="mt-16 mb-8">“Never had such a good time making a site“</MudText>
        <div class="absolute z-20 d-flex justify-center align-end mud-width-full mud-height-full">
            <MudButton OnClick="ToggleTestimonials" Color="Color.Primary" Variant="Variant.Filled" DropShadow="false" Size="Size.Large" Class="mb-12">@(_showTestimonials? "Show less" : "Show more")</MudButton>
        </div>
        <MudGrid Spacing="8">
            <MudItem md="5">
                <MudCard Elevation="24">
                    <MudCardHeader Class="px-6 pt-6">
                        <CardHeaderAvatar>
                            <MudIcon Class="mt-n4" Icon="@Icons.Material.Rounded.FormatQuote" Size="Size.Large"/>
                        </CardHeaderAvatar>
                        <CardHeaderContent>
                            <MudText Typo="Typo.subtitle2">Brian</MudText>
                            <MudText Typo="Typo.body2">EvoDynamic</MudText>
                        </CardHeaderContent>
                    </MudCardHeader>
                    <MudCardContent Class="pt-0 px-6 pb-6 mud-typography-body1">
                        Coming of an Angular project back to .NET, Blazor was the ideal choice and MudBlazor was the icing on the cake. . . not "mud" but a rich creamy sweet chocolate.
                    </MudCardContent>
                </MudCard>
            </MudItem>
            <MudItem md="7">
                <MudCard Elevation="24">
                    <MudCardHeader Class="px-6 pt-6">
                        <CardHeaderAvatar>
                            <MudIcon Class="mt-n4" Icon="@Icons.Material.Rounded.FormatQuote" Size="Size.Large"/>
                        </CardHeaderAvatar>
                        <CardHeaderContent>
                            <MudText Typo="Typo.subtitle2">Developer Team</MudText>
                            <MudText Typo="Typo.body2">Wunderminds</MudText>
                        </CardHeaderContent>
                    </MudCardHeader>
                    <MudCardContent Class="pt-0 px-6 pb-6 mud-typography-body1">
                        Saving us from tons of tiny details and allowing us to deliver sharp looking modern web applications, MudBlazor is the king of open source UI frameworks that no one should miss when building apps with Blazor!
                    </MudCardContent>
                </MudCard>
            </MudItem>
            <MudItem md="7">
                <MudCard Elevation="24">
                    <MudCardHeader Class="px-6 pt-6">
                        <CardHeaderAvatar>
                            <MudIcon Icon="@Icons.Material.Rounded.FormatQuote" Size="Size.Large"/>
                        </CardHeaderAvatar>
                        <CardHeaderContent>
                            <MudText Typo="Typo.subtitle2">Wave Master</MudText>
                        </CardHeaderContent>
                    </MudCardHeader>
                    <MudCardContent Class="pt-0 px-6 pb-6 mud-typography-body1">
                        Comprehensive, ambitious, fresh and clean. Some really cool implementations.
                        The development and improvement of components is really fast, and if a course correction is needed, they will do it.
                        Garderoben, henon and all the other contributors are approachable. They are getting stuff done!
                    </MudCardContent>
                </MudCard>
            </MudItem>
            <MudItem md="5">
                <MudCard Elevation="24">
                    <MudCardHeader Class="px-6 pt-6">
                        <CardHeaderAvatar>
                            <MudIcon Class="mt-n4" Icon="@Icons.Material.Rounded.FormatQuote" Size="Size.Large"/>
                        </CardHeaderAvatar>
                        <CardHeaderContent>
                            <MudText Typo="Typo.subtitle2">Karakoulak Spyridon</MudText>
                            <MudText Typo="Typo.body2">Arhs Group</MudText>
                        </CardHeaderContent>
                    </MudCardHeader>
                    <MudCardContent Class="pt-0 px-6 pb-6 mud-typography-body1">
                        Best open source component library for Blazor out there and easy to understand!
                    </MudCardContent>
                </MudCard>
            </MudItem>
            <MudItem md="6">
                <MudCard Elevation="24">
                    <MudCardHeader Class="px-6 pt-6">
                        <CardHeaderAvatar>
                            <MudIcon Class="mt-n4" Icon="@Icons.Material.Rounded.FormatQuote" Size="Size.Large"/>
                        </CardHeaderAvatar>
                        <CardHeaderContent>
                            <MudText Typo="Typo.subtitle2">Hayden Ravenscroft</MudText>
                            <MudText Typo="Typo.body2">Mail Solutions UK Ltd</MudText>
                        </CardHeaderContent>
                    </MudCardHeader>
                    <MudCardContent Class="pt-0 px-6 pb-6 mud-typography-body1">
                        A comprehensive library. Takes the hassle out of designing for Blazor. Used in many ongoing projects at the Mail Solutions Group.
                        The MudBlazor team has a real gem here.
                    </MudCardContent>
                </MudCard>
            </MudItem>
            <MudItem md="6">
                <MudCard Elevation="24">
                    <MudCardHeader Class="px-6 pt-6">
                        <CardHeaderAvatar>
                            <MudIcon Class="mt-n4" Icon="@Icons.Material.Rounded.FormatQuote" Size="Size.Large"/>
                        </CardHeaderAvatar>
                        <CardHeaderContent>
                            <MudText Typo="Typo.subtitle2">Frederik</MudText>
                            <MudText Typo="Typo.body2">Xuntar</MudText>
                        </CardHeaderContent>
                    </MudCardHeader>
                    <MudCardContent Class="pt-0 px-6 pb-6 mud-typography-body1">
                        Very practical, convenient and user-friendly library that has massively helped us in developing our applications. Great community as well!
                    </MudCardContent>
                </MudCard>
            </MudItem>
        </MudGrid>
        <div class="lp-fader"></div>
    </div>
</LandingSection>

<LandingSection SectionClass="dark-section-text z-10" BackgroundClass="mud-dark">
    <MudGrid>
        <MudItem xs="12" sm="12" md="6">
            <MudGrid>
                <MudItem xs="12">
                    <MudText Typo="Typo.h6" Color="Color.Primary">Designed for developers</MudText>
                    <MudText Typo="Typo.h5" Class="white-text">Developers love to work with MudBlazor</MudText>
                    <MudText Typo="Typo.subtitle1" Class="my-4">
                        We started MudBlazor with a simple promise, to empower the developer and fully take advantage of what Blazor offers. With MudBlazor you can create exceptional apps without the burden of mastering HTML, CSS and JS and focus your skillset on C#.
                    </MudText>
                </MudItem>
                <MudItem xs="12" sm="12" md="6">
                    <MudIcon Icon="@lpIconCode" Size="Size.Large"/>
                    <MudText Typo="Typo.subtitle2" Class="white-text my-2">TryMudBlazor</MudText>
                    <MudText>Use the full power of Blazor directly in your browser with TryMudBlazor.</MudText>
                    <MudText>Fully-fledged editor with IntelliSense, multiple files and ability to save your code.</MudText>
                    <MudLink Class="landing-link my-4" Href="https://try.mudblazor.com/" Target="_blank">Test online<MudIcon Icon="@Icons.Material.Rounded.KeyboardArrowRight" Size="Size.Small"/></MudLink>
                </MudItem>
                <MudItem xs="12" sm="12" md="6">
                    <MudIcon Icon="@lpIconTemplates" Size="Size.Large"/>
                    <MudText Typo="Typo.subtitle2" Class="white-text my-2">Templates</MudText>
                    <MudText>We provide all the default Blazor templates but pre configured with MudBlazor to help you get started faster.</MudText>
                    <MudLink Class="landing-link my-4" Href="https://github.com/MudBlazor/Templates" Target="_blank">Explore templates<MudIcon Icon="@Icons.Material.Rounded.KeyboardArrowRight" Size="Size.Small"/></MudLink>
                </MudItem>
            </MudGrid>
        </MudItem>
        <MudItem xs="12" sm="12" md="6">
            <div class="code-animation-container">
                <CodeEditor/>
                <MudCard Elevation="3" Class="code-change-card w-max z-20 mt-n12 ml-16">
                    <MudCardMedia Image="images/door.jpg" Height="0"/>
                    <MudCardContent>
                        <MudText>Old Paint</MudText>
                        <MudText Typo="Typo.body2">Old paint found on a stone house door.</MudText>
                        <MudText Typo="Typo.body2">This photo was taken in a small village in Istra Croatia.</MudText>
                    </MudCardContent>
                    <MudCardActions>
                        <MudButton Variant="Variant.Text" Color="Color.Primary">Share</MudButton>
                        <MudButton Variant="Variant.Text" Color="Color.Primary">Learn More</MudButton>
                    </MudCardActions>
                </MudCard>
            </div>
        </MudItem>
    </MudGrid>
</LandingSection>

<LandingSection>
    <div style="max-width:570px;">
        <MudText Typo="Typo.h6" Color="Color.Primary">Community</MudText>
        <MudText Typo="Typo.h5">Join our community</MudText>
        <MudText Typo="Typo.subtitle1" Class="mud-text-secondary mb-4">
            Do you have questions? Do you want to help others? Just talk or get news? Join one of our channels and become part of the MudBlazor community.
        </MudText>
    </div>
    <MudGrid Class="pt-4">
        <MudItem xs="12" sm="6" md="3">
            <MudIcon Icon="@Icons.Custom.Brands.Twitter" Class="twitter"/>
            <MudText Typo="Typo.subtitle2">Twitter</MudText>
            <MudText Typo="Typo.body1">For announcements, blog posts, and general MudBlazor stuff.</MudText>
            <MudLink Class="landing-link twitter my-4" Href="https://twitter.com/MudBlazor" Target="_blank">Follow us<MudIcon Icon="@Icons.Material.Rounded.KeyboardArrowRight" Size="Size.Small"/></MudLink>
        </MudItem>
        <MudItem xs="12" sm="6" md="3">
            <MudIcon Icon="@Icons.Custom.Brands.Discord" Class="discord"/>
            <MudText Typo="Typo.subtitle2">Discord</MudText>
            <MudText Typo="Typo.body1">To get involved in the community, ask questions, help others or just talk.</MudText>
            <MudLink Class="landing-link discord my-4" Href="https://discord.gg/mudblazor" Target="_blank">Come and chat<MudIcon Icon="@Icons.Material.Rounded.KeyboardArrowRight" Size="Size.Small"/></MudLink>
        </MudItem>
        <MudItem xs="12" sm="6" md="3">
            <MudIcon Icon="@Icons.Custom.Brands.GitHub" Class="github"/>
            <MudText Typo="Typo.subtitle2">GitHub</MudText>
            <MudText Typo="Typo.body1">To file issues, request features, and contribute, check out our GitHub.</MudText>
            <MudLink Class="landing-link github my-4" Href="https://github.com/MudBlazor/MudBlazor" Target="_blank">Check the code<MudIcon Icon="@Icons.Material.Rounded.KeyboardArrowRight" Size="Size.Small"/></MudLink>
        </MudItem>
        <MudItem xs="12" sm="6" md="3">
            <MudIcon Icon="@Icons.Custom.Brands.StackOverflow" Class="stackoverflow"/>
            <MudText Typo="Typo.subtitle2">Stack Overflow</MudText>
            <MudText Typo="Typo.body1">Active on Stack Overflow? Answer or ask question's under our tag.</MudText>
            <MudLink Class="landing-link stackoverflow my-4" Href="https://stackoverflow.com/tags/mudblazor" Target="_blank">Ask and answer questions<MudIcon Icon="@Icons.Material.Rounded.KeyboardArrowRight" Size="Size.Small"/></MudLink>
        </MudItem>
    </MudGrid>
</LandingSection>

<LandingSection StraightEnd="true" SectionClass="dark-section-text" BackgroundClass="mud-dark">
    <MudGrid>
        <MudItem xs="12" sm="12" md="6">
            <MudText Typo="Typo.h6" Color="Color.Primary">Global scale</MudText>
            <MudText Typo="Typo.h5" Class="white-text">MudBlazor is growing quickly</MudText>
            <MudText Typo="Typo.subtitle1" Class="my-4">
                We are growing every day, developers from all over the world are using MudBlazor and are engaged with the community.
                We are dedicated to improving every aspect of MudBlazor to be your number one choice when looking for a Blazor component library.
                Join us and be part of the library’s success!
            </MudText>
        </MudItem>
        <MudItem Class="world-map-item" xs="12" sm="12" md="6">
            <div class="world-map">
                <WorldMap/>
            </div>
        </MudItem>
        <MudItem xs="6" sm="3">
            <div class="global-scale-item">
                    <MudText Typo="Typo.h3" Color="Color.Primary">@NumericExtensions.RoundedToString(_nugetPackage?.TotalDownloads)</MudText>
                <div class="d-flex align-center">
                    <MudIcon Icon="@lpDownloads"/>
                    <MudText Typo="Typo.body1" Class="ml-4">Total Downloads</MudText>
                </div>
            </div>
        </MudItem>
        <MudItem xs="6" sm="3">
            <div class="global-scale-item">
                    <MudText Typo="Typo.h3" Color="Color.Primary">@NumericExtensions.RoundedToString(_gitHubRepo?.StargazersCount)</MudText>
                <div class="d-flex align-center">
                    <MudIcon Icon="@lpGitHub"/>
                    <MudText Typo="Typo.body1" Class="ml-4">GitHub Stars</MudText>
                </div>
            </div>
        </MudItem>
        <MudItem xs="6" sm="3">
            <div class="global-scale-item">
                <MudText Typo="Typo.h3" Color="Color.Primary">@_gitHubTotalContributors</MudText>
                <div class="d-flex align-center">
                    <MudIcon Icon="@lpContributors"/>
                    <MudText Typo="Typo.body1" Class="ml-4">Contributors</MudText>
                </div>
            </div>
        </MudItem>
        <MudItem xs="6" sm="3">
            <div class="global-scale-item">
                    <MudText Typo="Typo.h3" Color="Color.Primary">@NumericExtensions.RoundedToString(_discordInvite?.ApproximateMemberCount)</MudText>
                <div class="d-flex align-center">
                    <MudIcon Icon="@lpDiscord"/>
                    <MudText Typo="Typo.body1" Class="ml-4">Discord Members</MudText>
                </div>
            </div>
        </MudItem>
    </MudGrid>
</LandingSection>

<LandingSection Straight="true" BackgroundClass="surface">
    <div class="lp-grid">
        <div class="lp-grid-item main-description">
            <MudText Typo="Typo.h5">Ready to get started?</MudText>
            <MudText Typo="Typo.subtitle1" Class="mud-text-secondary mb-4">
                Ready to build amazing things? there are several ways to get started. If you are new to web development or blazor in general, the Getting Started section is a great place to start.
            </MudText>
            <div>
                <MudButton Color="Color.Primary" Variant="Variant.Filled" DropShadow="false" Class="mud-button-gradient-primary" Size="Size.Large" Href="/getting-started/installation">Get started</MudButton>
            </div>
        </div>
        <div class="lp-grid-item">
            <MudIcon Icon="@lpIconCode"/>
            <div class="lp-border-title">
                <MudText Typo="Typo.subtitle2">TryMudBlazor</MudText>
            </div>
            <MudText>Test MudBlazor directly in your browser, no software or installation needed.</MudText>
            <MudLink Class="landing-link" Href="https://try.mudblazor.com/" Target="_blank">Test online<MudIcon Icon="@Icons.Material.Rounded.KeyboardArrowRight" Size="Size.Small"/></MudLink>
        </div>
        <div class="lp-grid-item">
            <MudIcon Icon="@lpIconTemplatesFilled"/>
            <div class="lp-border-title">
                <MudText Typo="Typo.subtitle2">Templates</MudText>
            </div>
            <MudText>Install our pre configured .NET Templates with MudBlazor.</MudText>
            <MudLink Class="landing-link" Href="https://github.com/MudBlazor/Templates" Target="_blank">Explore templates<MudIcon Icon="@Icons.Material.Rounded.KeyboardArrowRight" Size="Size.Small"/></MudLink>
        </div>
    </div>
</LandingSection>

@code {
#nullable enable
    private string lpIconCode = "<path d=\"M8.52 21C8.2 21 7.92 20.8806 7.68 20.6417L0.36 13.356C-0.12 12.8782 -0.12 12.1218 0.36 11.6838L7.68 4.35831C8.16 3.88056 8.92 3.88056 9.36 4.35831C9.84 4.83607 9.84 5.59251 9.36 6.03044L2.88 12.4801L9.36 18.9297C9.84 19.4075 9.84 20.1639 9.36 20.6019C9.16 20.8806 8.84 21 8.52 21Z\" fill=\"#5E5BF0\"/><path d=\"M15.48 21C15.16 21 14.88 20.8806 14.64 20.6417C14.16 20.1639 14.16 19.4075 14.64 18.9696L21.12 12.5199L14.6 6.03044C14.12 5.55269 14.12 4.79625 14.6 4.35831C15.08 3.88056 15.84 3.88056 16.28 4.35831L23.6 11.6838C24.08 12.1616 24.08 12.918 23.6 13.356L16.32 20.6417C16.08 20.8806 15.76 21 15.48 21Z\" fill=\"#66EDE5\"/>";
    private string lpIconTemplates = "<g clip-path=\"url(#clip0_95_632)\"><path d=\"M12.0182 22C11.8723 22 11.7264 21.9642 11.6169 21.9283L1.6932 18.0215C1.29187 17.8423 1 17.448 1 17.0179V6.98208C1 6.37276 1.4743 5.90681 2.09453 5.90681C2.71476 5.90681 3.18905 6.37276 3.18905 6.98208V16.2652L12.0182 19.7419L20.8474 16.2652V6.98208C20.8474 6.37276 21.3217 5.90681 21.942 5.90681C22.5622 5.90681 23.0365 6.37276 23.0365 6.98208V17.0179C23.0365 17.448 22.7811 17.8423 22.3433 18.0215L12.4196 21.9283C12.2736 21.9642 12.1642 22 12.0182 22Z\" fill=\"#5E5BF0\"/><path d=\"M17.199 9.99283C17.0531 9.99283 16.9436 9.95699 16.7977 9.92115L6.8375 6.01434C6.29024 5.79928 5.99836 5.15412 6.21727 4.61649C6.47266 4.07885 7.09289 3.79211 7.64015 4.00717L17.5639 7.91398C18.1111 8.12903 18.403 8.77419 18.1841 9.31183C18.0382 9.74194 17.6368 9.99283 17.199 9.99283Z\" fill=\"#66EDE5\"/><path d=\"M12.0182 12.0009C11.8723 12.0009 11.7264 11.9651 11.6169 11.9292L1.6932 7.98656C1.25539 7.84319 1 7.44893 1 6.98298C1 6.51703 1.25539 6.1586 1.6932 5.97939L11.5804 2.07258C11.8358 1.96505 12.1277 1.96505 12.3831 2.07258L22.3068 5.97939C22.7081 6.1586 23 6.55287 23 6.98298C23 7.41308 22.7446 7.80735 22.3068 7.98656L12.4196 11.8934C12.2736 11.9651 12.1277 12.0009 12.0182 12.0009ZM5.01327 6.98298L11.9818 9.74283L18.9502 6.98298L12.0182 4.22312L5.01327 6.98298Z\" fill=\"#5E5BF0\"/><path d=\"M12.0182 22C11.398 22 10.9237 21.5341 10.9237 20.9247V10.8889C10.9237 10.2796 11.398 9.81362 12.0182 9.81362C12.6385 9.81362 13.1128 10.2796 13.1128 10.8889V20.9247C13.1128 21.5341 12.602 22 12.0182 22Z\" fill=\"#5E5BF0\"/></g><defs><clipPath id=\"clip0_95_632\"><rect width=\"22\" height=\"20\" fill=\"white\" transform=\"translate(1 2)\"/></clipPath></defs>";
    private string lpIconTemplatesFilled = "<g clip-path=\"url(#clip0_137_279)\"><path d=\"M18.2935 7.55172L21.9784 6.17241C22.1609 6.10345 22.1609 5.86207 21.9784 5.7931L12.0912 2C12.0182 2 11.9817 2 11.9088 2L8.18738 3.37931C8.00496 3.44828 8.00496 3.68966 8.18738 3.75862L18.1476 7.55172C18.1841 7.58621 18.257 7.58621 18.2935 7.55172Z\" fill=\"#66EDE5\"/><path d=\"M6.10778 4.20653L1.98506 5.79273C1.80264 5.8617 1.80264 6.10308 1.98506 6.17204L11.9088 9.93066C11.9453 9.96515 12.0182 9.96515 12.0912 9.93066L16.2504 8.34446C16.4328 8.27549 16.4328 8.03411 16.2504 7.96515L6.2902 4.20653C6.25372 4.17204 6.18075 4.17204 6.10778 4.20653Z\" fill=\"#66EDE5\"/><path d=\"M11.325 10.8274L1.32831 7.0343C1.14589 6.96533 0.999954 7.06878 0.999954 7.24119V16.5171V16.9653C0.999954 17.0688 1.07292 17.1377 1.14589 17.1722L11.1426 20.9653C11.2885 21.0343 11.4344 20.9309 11.4344 20.7584V11.0343C11.4709 10.9308 11.398 10.8619 11.325 10.8274Z\" fill=\"#5E5BF0\"/><path d=\"M12.5655 11.0343V20.793C12.5655 20.9309 12.7114 21.0343 12.8574 20.9998L22.8905 17.1723C22.9635 17.1378 23.0365 17.0688 23.0365 16.9654V7.20674C23.0365 7.06881 22.8905 6.96536 22.7446 6.99985L12.7479 10.793C12.602 10.8619 12.5655 10.9309 12.5655 11.0343Z\" fill=\"#5E5BF0\"/></g><defs><clipPath id=\"clip0_137_279\"><rect width=\"22\" height=\"19\" fill=\"white\" transform=\"translate(0.999954 2)\"/></clipPath></defs>";
    private string lpDownloads = "<path d=\"M12 17.88C11.68 17.88 11.4 17.76 11.16 17.52L3.95998 10.32C3.47998 9.84 3.47998 9.08 3.95998 8.64C4.43998 8.16 5.19998 8.16 5.63998 8.64L12 15L18.36 8.64C18.84 8.16 19.6 8.16 20.04 8.64C20.52 9.12 20.52 9.88 20.04 10.32L12.84 17.52C12.6 17.8 12.32 17.88 12 17.88Z\" fill=\"#66EDE5\"/><path d=\"M22.8 24H1.2C0.52 24 0 23.48 0 22.8V12.64C0 11.96 0.52 11.44 1.2 11.44C1.88 11.44 2.4 11.96 2.4 12.64V21.6H21.6V12.64C21.6 11.96 22.12 11.44 22.8 11.44C23.48 11.44 24 11.96 24 12.64V22.8C24 23.48 23.48 24 22.8 24Z\" fill=\"#5E5BF0\"/><path d=\"M12 16.6C11.32 16.6 10.8 16.08 10.8 15.4V1.2C10.8 0.52 11.32 0 12 0C12.68 0 13.2 0.52 13.2 1.2V15.4C13.2 16.08 12.68 16.6 12 16.6Z\" fill=\"#66EDE5\"/>";
    private string lpGitHub = "<path d=\"M9.46762 18.4784C4.47686 18.4784 2.22177 13.9188 2.11087 13.7289C1.85209 13.1589 2.0739 12.475 2.59146 12.209C3.14599 11.943 3.81142 12.171 4.0702 12.7029C4.14414 12.8549 5.9556 16.3886 9.7264 16.1986C10.3549 16.1606 10.8724 16.6546 10.8724 17.3005C10.9094 17.9465 10.4288 18.4784 9.80033 18.4784C9.7264 18.4784 9.61549 18.4784 9.46762 18.4784Z\" fill=\"#66EDE5\"/><path d=\"M16.3068 23H9.83731C9.20884 23 8.72825 22.506 8.72825 21.8601V17.3385C8.72825 16.6546 8.87612 16.0086 9.1349 15.4387C6.10348 14.2988 4.10718 11.905 4.10718 9.24525C4.10718 7.99136 4.51383 6.81347 5.29017 5.78756C4.99442 4.79965 4.92049 3.54577 4.99442 2.1019C5.06836 1.45596 5.54895 1 6.14045 1C6.47317 1 9.28278 1.038 10.9094 2.51986C12.3142 2.25389 13.7929 2.25389 15.2347 2.51986C16.8244 1.038 19.634 1 20.0037 1C20.5952 1 21.0758 1.45596 21.1127 2.0639C21.2236 3.50777 21.1127 4.76166 20.817 5.74957C21.5933 6.81347 22 7.99136 22 9.20725C22 11.867 20.0037 14.2608 16.9722 15.4007C17.231 16.0086 17.3789 16.6546 17.3789 17.3005V21.8221C17.4159 22.468 16.8983 23 16.3068 23ZM10.9464 20.7202H15.1978V17.3385C15.1978 16.6926 14.902 16.0846 14.4214 15.6667C14.0887 15.4007 13.9408 14.9447 14.0517 14.4888C14.1626 14.0708 14.4953 13.7288 14.902 13.6528C17.7856 13.0829 19.7819 11.2591 19.7819 9.20725C19.7819 8.10535 19.1904 7.26943 18.7098 6.73748C18.377 6.39551 18.3031 5.90155 18.5249 5.4456C18.6728 5.14162 18.8946 4.49568 18.8946 3.35579C17.9704 3.50777 16.8983 3.81174 16.4917 4.41969C16.2329 4.79965 15.7523 4.98964 15.3087 4.87565C13.8299 4.49568 12.2403 4.49568 10.7615 4.87565C10.3179 4.98964 9.87428 4.79965 9.57853 4.41969C9.17187 3.81174 8.09978 3.50777 7.17557 3.35579C7.21254 4.49568 7.39738 5.14162 7.54526 5.4456C7.7301 5.86356 7.65616 6.39551 7.36041 6.73748C6.87982 7.26943 6.28832 8.10535 6.28832 9.20725C6.28832 11.2591 8.28463 13.0449 11.1682 13.6528C11.5748 13.7288 11.9075 14.0708 12.0185 14.4888C12.1294 14.9067 11.9815 15.3627 11.6488 15.6667C11.1682 16.0846 10.8724 16.6926 10.8724 17.3385V20.7202H10.9464Z\" fill=\"#5E5BF0\"/>";
    private string lpContributors = "<g clip-path=\"url(#clip0_95_575)\"><path d=\"M2.1 23C1.47667 23 1 22.5233 1 21.9V18.7467C1 15.08 3.01667 13.0633 6.68333 13.0633H13.1C16.7667 13.0633 18.7833 15.08 18.7833 18.7467V21.9C18.7833 22.5233 18.3067 23 17.6833 23C17.06 23 16.5833 22.5233 16.5833 21.9V18.7467C16.5833 16.29 15.52 15.2633 13.1 15.2633H6.68333C4.22667 15.2633 3.2 16.3267 3.2 18.7467V21.9C3.2 22.4867 2.72333 23 2.1 23Z\" fill=\"#5E5BF0\"/><path d=\"M9.87332 12.1467C6.79332 12.1467 4.29999 9.65333 4.29999 6.57333C4.29999 3.49333 6.79332 1 9.87332 1C12.9533 1 15.4467 3.49333 15.4467 6.57333C15.4467 9.65333 12.9533 12.1467 9.87332 12.1467ZM9.87332 3.2C8.00332 3.2 6.49999 4.70333 6.49999 6.57333C6.49999 8.44333 8.00332 9.94667 9.87332 9.94667C11.7433 9.94667 13.2467 8.44333 13.2467 6.57333C13.2467 4.70333 11.7433 3.2 9.87332 3.2Z\" fill=\"#66EDE5\"/><path d=\"M21.9 23C21.2767 23 20.8 22.5233 20.8 21.9V18.7467C20.8 16.5833 19.9567 15.9233 19.2967 15.63C18.7467 15.3733 18.5267 14.7133 18.7833 14.1633C19.04 13.6133 19.7 13.3933 20.25 13.65C21.4967 14.2367 23 15.63 23 18.7467V21.9C23 22.4866 22.4867 23 21.9 23Z\" fill=\"#66EDE5\"/><path d=\"M15.74 11.8167C15.3 11.8167 14.8966 11.56 14.7133 11.12C14.4933 10.57 14.75 9.91 15.3366 9.69C16.62 9.17667 17.4633 7.96667 17.4633 6.57333C17.4633 5.18 16.62 3.97 15.3366 3.45667C14.7866 3.23667 14.4933 2.57667 14.7133 2.02667C14.9333 1.47667 15.5933 1.18333 16.1433 1.40333C18.27 2.24667 19.6266 4.26333 19.6266 6.57333C19.6266 8.88333 18.27 10.8633 16.1433 11.7433C15.9966 11.78 15.8866 11.8167 15.74 11.8167Z\" fill=\"#5E5BF0\"/></g><defs><clipPath id=\"clip0_95_575\"><rect width=\"22\" height=\"22\" fill=\"white\" transform=\"translate(1 1)\"/></clipPath></defs>";
    private string lpDiscord = "<path d=\"M9.37,4.77C9.18,3.57,8.09,3.9,7,4.19A8.39,8.39,0,0,0,4.24,5.53c-1,.72-1.78,3.75-2.12,5.26a19.35,19.35,0,0,0-.66,5.37c.08.69,1.12,1.46,2.62,2.21A6,6,0,0,0,7,19c.47-.14,1-1.4,1.17-1.82\" style=\"fill:none;stroke:#5e5bf0;stroke-miterlimit:10;stroke-width:1.5px\"/><path d=\"M14.31,4.77c.19-1.2,1.28-.87,2.4-.58a6.79,6.79,0,0,1,2.73,1.34c.89.82,1.79,3.75,2.12,5.26a19.35,19.35,0,0,1,.66,5.37c-.08.69-1.12,1.46-2.62,2.21a6,6,0,0,1-2.91.59c-.48-.14-1-1.4-1.17-1.82\" style=\"fill:none;stroke:#5e5bf0;stroke-miterlimit:10;stroke-width:1.5px\"/><ellipse cx=\"8.82\" cy=\"12.31\" rx=\"1.72\" ry=\"2.01\" style=\"fill:none;stroke:#66ede5;stroke-miterlimit:10;stroke-width:1.2px\"/><ellipse cx=\"15.04\" cy=\"12.22\" rx=\"1.72\" ry=\"2.01\" style=\"fill:none;stroke:#66ede5;stroke-miterlimit:10;stroke-width:1.2px\"/><path d=\"M4.35,15.05a.8.8,0,0,1,1.1-.15,11.93,11.93,0,0,0,12.65,0,.8.8,0,0,1,1.1.15.78.78,0,0,1-.31,1.11,13.39,13.39,0,0,1-14.23,0A.79.79,0,0,1,4.35,15.05Z\" style=\"fill:#5e5bf0\"/><path d=\"M5.24,7.3a.78.78,0,0,1,.32-1.11,12.06,12.06,0,0,1,12.65,0,.78.78,0,0,1,.33,1.11.83.83,0,0,1-1.11.16,10.55,10.55,0,0,0-11.09,0A.83.83,0,0,1,5.24,7.3Z\" style=\"fill:#5e5bf0\"/>";

    private bool _showTestimonials { get; set; }
    private int _gitHubTotalContributors { get; set; }
    private DiscordInvite? _discordInvite { get; set; } = new();
    private NugetPackage? _nugetPackage { get; set; } = new();
    private GitHubRepository? _gitHubRepo { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        _discordInvite = await DiscordApiClient.GetDiscordInviteAsync();
        _nugetPackage = await NugetApiClient.GetPackageAsync("mudblazor");
        _gitHubRepo = await GitHubApiClient.GetRepositoryAsync("MudBlazor", "MudBlazor");
        _gitHubTotalContributors = await GitHubApiClient.GetContributorsCountAsync("MudBlazor", "MudBlazor");
    }

    private void ToggleTestimonials()
    {
        _showTestimonials = !_showTestimonials;
    }

    private string GetTestimonialClass()
    {
        if (_showTestimonials)
        {
            return $"lp-testimonials";
        }
        else
        {
            return $"lp-testimonials hide-testimonials";
        }
    }

}
